<!--  -->
<template>
	<div class="content">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<div class="main">
			<div class="quit">
				<i class="iconfont pdxcha" @click="toPage(-1)"></i>
			</div>
			<div class="phone-title title" v-if="isPhone">
				<h3>手机号注册/登录</h3>
				<p>未注册的手机号将自动创建账户</p>
			</div>
			<div class="phone-title title" v-else>
				<h3>密码登录</h3>
				<p>
					还没有账号，
					<span>立即注册</span>
				</p>
			</div>
			<tab :list="tabList" :current="current" :level="true" @click="tabChange" className="activeBlack"></tab>
			<phone-picker style="margin-bottom: 60rpx" v-if="isPhone" @change="changeHandler">
				<div slot="phone">
					<u-input v-model="phone" type="number" placeholder="请输入手机号码" />
				</div>
				<div class="code layout-flex-all" slot="nphone">
					<u-input v-model="code" placeholder="请输入短信验证码" />
					<!--          <span @click="getCode">获取验证码</span>-->
					<span @click="time == 60 ? getCodeHandle() : ''">{{ verification }}</span>
				</div>
			</phone-picker>
			<!-- <phone-picker style="margin-bottom: 60rpx" v-else @change="changeHandler"> -->
			<div style="margin-bottom: 60rpx" v-else @change="changeHandler">
				<div>
					<u-input v-model="account" type="text" placeholder="请输入手机号码或账号" style="padding: 20rpx 0; border-bottom: 1rpx solid #f6f6f6" />
				</div>
				<div class="code layout-flex-all" slot="nphone">
					<u-input v-model="passWord" type="password" placeholder="请输入密码" style="padding: 20rpx 0; border-bottom: 1rpx solid #f6f6f6" />
				</div>
			</div>
			<!-- </phone-picker> -->
			<p class="forget" v-if="!isPhone">忘记密码？</p>
			<c-button class="pl" style="margin-bottom: 45rpx" @click="toLogin">确认登录</c-button>
			<p class="tips layout-flex-base" @click="toggleAgree">
				<span :class="agree ? 'com-checkbox' : 'com-checkbox-no'" style="margin-right: 12rpx"></span>
				<span>登录即代表您已同意</span>
				<navigator hover-class="none" class="a">《xx用户协议》</navigator>
			</p>
			<!-- <div class="password-title title"></div> -->
		</div>
		<div class="bottom">
			<p class="tips">- 其他登录方式 -</p>
			<div class="wx" @click="weixinLogin">
				<image src="./img/wx_logo.png" mode="widthFix"></image>
				<span>微信登录</span>
			</div>
		</div>
	</div>
</template>

<script>
import mixin from "@/mixin"
import { sendCode, memberRegister, userInfo } from "../../uni/uni"
import { backend } from "uni/index"
import md5 from "js-md5"

export default {
	mixins: [mixin],
	computed: {
		verification() {
			if (this.time < 60) {
				return this.time + "秒"
			}
			return "获取验证码"
		},
	},
	data() {
		return {
			agree: true,
			tabList: ["验证码登录", "密码登录"],
			current: 0,
			isPhone: true,
			phone: "",
			account: "",
			code: "",
			passWord: "",
			time: 60,
			timer: 0,
		}
	},

	components: {},

	methods: {
		weixinLogin() {
			uni.login({
				provider: "weixin",
				success: function (loginRes) {
					console.log(loginRes)
					console.error(loginRes.authResult)
					// 获取用户信息
					uni.getUserInfo({
						provider: "weixin",
						success: function (infoRes) {
							console.log(infoRes)
						},
					})
					// userLogin({ username: this.phone, password: this.passWord }).then(res => {
					//
					// })
					//获取登录的token
					// that.$queue.setData('weixinToken',loginRes.authResult.access_token);
					// //获取登录的unionid 这个还是在开放平台做了 公众号 小程序 微信登录app关联才会有
					// that.$queue.setData('unionid', loginRes.authResult.unionid);
					// //获取openid
					// that.$queue.setData('weixinOpenid', loginRes.authResult.openid);
					//这里吧数据全部提交给后台核验，有没有注册 注册了 后台代码会请求接口String s = HttpClient.doGet("https://api.weixin.qq.com/sns/userinfo?access_token=" + loginInfo.getToken() + "&openid=" + loginInfo.getOpenid()); 获取头像和昵称
				},
			})
		},
		toLogin() {
			//手机号验证码登录
			if (!this.agree) {
				this.$message.error("请同意用户协议")
				return false
			}
			console.log(this.current) //0 验证码登录  1 账号密码登录
			if (this.current == 0) {
				console.log("手机号登录")
				console.log(this.phone)
				console.log(this.code)

				var phoneReg = /^1[0-9]{10}$/
				if (!phoneReg.test(this.phone)) {
					this.$message.error("手机格式不正确")
					return false
				}
				if (this.code == "") {
					this.$message.error("验证码不能为空")
					return false
				}
				memberRegister({
					phone: this.phone,
					smsCode: this.code,
				})
					.then(res => {
						this.setStorage("token", res.token)
						this.setStorage("memberId", res.id)
						// console.log(res)
						// this.bandDeviceNumber({
						//   memberId: res.id,
						//   deviceNumber: plus.push.getClientInfo().clientid,
						// }).then(result => {
						//   console.log(result)
						// })
						// //获取会员的信息
						// this.getMemberInfo({
						//   id: res.id,
						// }).then(resp => {
						//   this.$store.commit("saveUserInfo", resp)
						//   // this.toPage(-1)
						//   uni.switchTab({
						//     url: "/pages/index/index",
						//   })
						// })
					})
					.catch(res => {
						console.log(res)
					})
			} else {
				// var phoneReg = /^1[0-9]{10}$/
				// if (!phoneReg.test(this.phone)) {
				// 	this.$message.error("手机格式不正确")
				// 	return false
				// }
				if (this.account == "") {
					this.$message.error("手机号或账号不能为空")
					return false
				}
				if (this.passWord == "") {
					this.$message.error("密码不能为空")
					return false
				}

				uni.request({
					url: `${backend}/login?username=${this.account}&password=${md5(this.passWord)}`,
					method: "POST",
					success: res => {
						if (res.data.code == 0) {
							this.setStorage("token", res.data.data.token)
							this.setStorage("refreshToken", res.data.data.refreshToken)
							uni.switchTab({
								url: "/pages/flow/index",
							})
						} else {
							this.$message.error(res.data.msg)
						}
						userInfo().then(res => {
							this.$store.commit("user/setUserInfo", res)
						})
					},
				})
			}
		},

		getCodeHandle() {
			//获取验证码
			console.log("验证码")
			console.log(this.phone)
			var phoneReg = /^1[0-9]{10}$/
			if (!phoneReg.test(this.phone)) {
				this.$message.error("手机格式不正确")
				return false
			}
			this.time--
			sendCode({
				mobile: this.phone,
				type: 1,
			})
				.then(res => {
					console.log(res)
					this.$message.success("发送成功")
					this.timer = setInterval(() => {
						this.time--
						if (this.time <= 0) {
							clearInterval(this.timer)
							this.time = 60
						}
					}, 1000)
				})
				.catch(e => {
					clearInterval(this.timer)
					this.time = 60
					// error
				})
		},

		changeHandler(e) {
			//手机号
			console.log(e)
		},
		toggleAgree() {
			this.agree = !this.agree
		},
		tabChange(i) {
			this.current = i
			if (this.current == 0) {
				this.isPhone = true
			}
			if (this.current == 1) {
				this.isPhone = false
			}
		},
	},
}
</script>
<style lang="scss" scoped>
.content {
	.main {
		padding: 60rpx $padding40 0;
		.quit {
			padding-bottom: 50rpx;
			i {
				font-size: 38rpx;
				font-weight: bold;
			}
		}
		.title {
			margin-bottom: 90rpx;
			h3 {
				font-size: 46rpx;
				color: $font-title-color;
				line-height: 1.6;
				font-weight: bold;
			}
			p {
				font-size: 26rpx;
				color: $font-small-gray;
				span {
					color: $theme-color;
				}
			}
		}
		.account {
			padding: 20rpx 0;
			border-bottom: 1rpx solid #f6f6f6;
		}
		.code {
			span {
				margin-left: 40rpx;
				font-weight: normal;
				color: #c4c4c4;
			}
		}
		.forget {
			margin: -40rpx 0 30rpx;
			text-align: right;
			font-size: 26rpx;
			color: $theme-color;
		}
		.tips {
			font-size: 25rpx;
			color: $font-small-gray;
			line-height: 1;
			.a {
				display: inline-block;
				color: $theme-color;
			}
		}
	}
	.bottom {
		position: fixed;
		bottom: 55rpx;
		left: 0;
		right: 0;
		text-align: center;
		.tips {
			margin-bottom: 34rpx;
			font-size: 24rpx;
			color: $font-small-gray;
		}
		.wx {
			display: flex;
			flex-direction: column;
			align-items: center;
			image {
				margin-bottom: 12rpx;
				width: 80rpx;
				height: 80rpx;
			}
			span {
				color: #666;
				font-size: 22rpx;
			}
		}
	}
}
</style>
